<div class="row" *ngFor="let items of _attrs">
    <div class="form-group col" [ngStyle]="{ 'max-width': extension.type === 8 ? '100%' : _w }" *ngFor="let extension of items">
        <div [ngSwitch]="extension.type" style="width: 100%">
            <div *ngSwitchCase="1">
                <label for="{{ extension.key }}">{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span>
                </label>
                <input id="{{ extension.key }}" #numberInput="ngModel" type="number" name="{{ extension.key }}" class="form-control" [(ngModel)]="_dto[extension.key]" [required]="extension.required" [disabled]="extension.readonly" />
                <validation-messages [formCtrl]="numberInput"></validation-messages>
            </div>

            <div *ngSwitchCase="2">
                <label for="{{ extension.key }}">{{ extension.title }}
                    <span class="text-danger" *ngIf="extension.required">*</span>
                </label>
                <input id="{{ extension.key }}" #textInput="ngModel" type="text" name="{{ extension.key }}" class="form-control" [(ngModel)]="_dto[extension.key]" [required]="extension.required" [disabled]="extension.readonly" />
                <validation-messages [formCtrl]="textInput"></validation-messages>
            </div>

            <div *ngSwitchCase="3">
                <div class="m-checkbox-list">
                    <label>&nbsp;</label>
                    <label for="{{ extension.key }}" class="m-checkbox">
                        <input
                            id="{{ extension.key }}"
                            type="checkbox"
                            name="{{ extension.key }}"
                            [(ngModel)]="_dto[extension.key]"
                            [required]="extension.required"
                            [disabled]="extension.readonly"
                        />
                        {{ extension.title }}
                        <span class="text-danger" *ngIf="extension.required">*</span>
                        <span></span>
                    </label>
                </div>
            </div>

            <div *ngSwitchCase="4">
                <label>{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label>
                <p-dropdown [options]="_optionAll[extension.key + 'Options']" name="{{ extension.key }}" [(ngModel)]="_dto[extension.key]" [style]="{ width: '100%', padding: '0.4rem 0.5rem' }" styleClass="form-control" filter="true" [required]="extension.required" [disabled]="extension.readonly">
                </p-dropdown>
            </div>
            <div *ngSwitchCase="5">
                <label>{{ extension.title }}<span class="text-danger" *ngIf="extension.required">*</span> </label>
                <p-multiSelect [options]="_optionAll[extension.key + 'Options']" name="{{ extension.key }}" [(ngModel)]="_dto[extension.key]" [style]="{ width: '100%' }" styleClass="form-control" [required]="extension.required" [disabled]="extension.readonly">
                </p-multiSelect>
            </div>
            <div *ngSwitchCase="6">
                <label>{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label>
                <div style="width: 100%">
                    <p-calendar [ngModel]="_dto[extension.key + '_Date']" (ngModelChange)="dateChange($event, extension.key)" name="{{ extension.key }}" dateFormat="yy-mm-dd" [inputStyleClass]="'form-control'" [locale]="calendarHelper.cn" [inputStyleClass]="'form-control'" [style]="{ width: '100%' }" [inputStyle]="{ width: '100%' }"
                        [required]="extension.required" [disabled]="extension.readonly"></p-calendar>
                </div>
            </div>

            <div *ngSwitchCase="7">
                <label>{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label>
                <div style="width: 100%">
                    <p-calendar [ngModel)="_dto[extension.key + '_Date']" (ngModelChange)="dateChange($event, extension.key)" showTime="true" name="{{ extension.key }}" dateFormat="yy-mm-dd" [inputStyleClass]="'form-control'" [locale]="calendarHelper.cn" [inputStyleClass]="'form-control'" [style]="{ width: '100%' }" [inputStyle]="{ width: '100%' }"
                        [required]="extension.required" [disabled]="extension.readonly"></p-calendar>
                </div>
            </div>

            <div *ngSwitchCase="8">
                <label for="{{ extension.key }}">{{ extension.title }} <span class="text-danger" *ngIf="extension.required">*</span></label
                >

                <textarea
                    id="{{ extension.key }}"
                    #textareaInput="ngModel"
                    class="form-control"
                    name="{{ extension.key }}"
                    rows="3"
                    [(ngModel)]="_dto[extension.key]"
                    placeholder="{{ extension.title }}"
                    [required]="extension.required"
                    [disabled]="extension.readonly"
                ></textarea>
                <validation-messages [formCtrl]="textareaInput"></validation-messages>
            </div>
        </div>
    </div>
</div>